<template>
	<view>
		<cu-custom :isBack="true">
			<block slot="backText">{{$t('more')}}</block>
		</cu-custom>
		<view class="bg-white" style="margin-top:45rpx;">
			<view class="cu-list grid col-4 no-border" style="background:rgba(0,0,0,0) ">
				<view class="cu-item" style="margin:-10rpx 0">
					<button class="custom-button" open-type="share">
						<view class="cuIcon-share" :style="{color : themeConfig.primaryColor}"
							style="font-size: 54rpx;">
						</view>
						<view class="padding-sm" style="font-size:28rpx;color:#666666">{{$t('share')}}</view>
					</button>
				</view>

				<view class="cu-item" style="margin:-10rpx 0">
					<button class="custom-button" open-type="openSetting">
						<view class="cuIcon-safe text-xxl" :style="{color : themeConfig.primaryColor}"
							style="font-size: 54rpx;">
						</view>
						<view class="padding-sm" style="font-size:28rpx;color:#666666">{{$t('authorize')}}</view>
					</button>
				</view>
			</view>
		</view>
		<view class="cu-bar margin-top bg-white">
			<view class="action">
				<text class="cuIcon-title text-blue"></text>{{$t('open')+$t('notice')}}
			</view>
			<view class="action">
				<switch :class="themeConfig.theme" :checked="openNotice" @change="changeOpenNotice"></switch>
			</view>
		</view>
		<view class="cu-bar margin-top bg-white">
			<view class="action">
				<text class="cuIcon-title text-blue"></text>{{$t('enable')+$t('script')}}
			</view>
			<view class="action">
				<switch :class="themeConfig.theme" :checked="enableEval" @change="changeEnableEval"></switch>
			</view>
		</view>
		<view class="cu-bar margin-top bg-white">
			<view class="action">
				<text class="cuIcon-title text-blue"></text>{{$t('filter')+$t('repeat')}}
			</view>
			<view class="action">
				<switch :class="themeConfig.theme" :checked="filterRepeat" @change="changeFilterRepeat"></switch>
			</view>
		</view>
		<view class="cu-bar margin-top bg-white">
			<view class="action">
				<text class="cuIcon-title text-blue"></text>{{$t('show')+$t('hidden')}}
			</view>
			<view class="action">
				<switch :class="themeConfig.theme" :checked="showHidden" @change="changeShowHidden"></switch>
			</view>
		</view>
		<view class="cu-bar margin-top bg-white">
			<view class="action">
				<text class="cuIcon-title text-blue"></text>{{$t('add')+$t('frame')}}
			</view>
			<view class="action">
				<switch :class="themeConfig.theme" :checked="addFrame" @change="changeAddFrame"></switch>
			</view>
		</view>
		<view class="cu-bar margin-top bg-white">
			<view class="action">
				<text class="cuIcon-title text-blue"></text>{{$t('show')+$t('view')}}
			</view>
			<view class="action">
				<switch :class="themeConfig.theme" :checked="showView" @change="changeShowView"></switch>
			</view>
		</view>
		<view class="cu-bar margin-top bg-white">
			<view class="action">
				<text class="cuIcon-title text-blue"></text>{{$t('show')+$t('child')+$t('device')}}
			</view>
			<view class="action">
				<switch :class="themeConfig.theme" :checked="showChildDevice" @change="changeShowChildDevice"></switch>
			</view>
		</view>
		<view class="cu-bar margin-top bg-white">
			<view class="action">
				<text class="cuIcon-title text-blue"></text>{{$t('model')}}
			</view>
			<view class="action">
				<button v-for="(item,index) in websiteModelList" :key="index"
					:class="[item.value == websiteModel ? 'selectButton' : 'noSelectButton']"
					class="margin-right-sm cu-btn block" size="mini" :style="{'--color': themeConfig.primaryColor}"
					@tap="changeWebsiteModel(item)">{{item.label}}</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		listWebsiteModel
	} from '@/util/role.js'
	import * as storage from '@/util/storage.js'
	export default {
		data() {
			return {
				enableEval: storage.getEnableEval(),
				filterRepeat: storage.getFilterRepeat(),
				showHidden: storage.getShowHidden(),
				addFrame: storage.getAddFrame(),
				showChildDevice: storage.getShowChildDevice(),
				showView: storage.getShowView(),
				openNotice: storage.getOpenNotice(),
				websiteModelList: [],
				websiteModel: storage.getWebsiteModel()
			}
		},
		computed: {
			themeConfig() {
				return this.$store.state.themeConfig
			}
		},
		onShow() {
			this.init()
			this.listWebsiteModel()
		},
		methods: {
			changeWebsiteModel(item) {
				this.websiteModel = item.value
				storage.setWebsiteModel(this.websiteModel)
			},
			init(option) {},
			listWebsiteModel() {
				this.websiteModelList = listWebsiteModel(this)
			},
			changeOpenNotice(e) {
				this.openNotice = e.detail.value
				storage.setOpenNotice(this.openNotice)
			},
			changeEnableEval(e) {
				this.enableEval = e.detail.value
				storage.setEnableEval(this.enableEval)
			},
			changeFilterRepeat(e) {
				this.filterRepeat = e.detail.value
				storage.setFilterRepeat(this.filterRepeat)
			},
			changeShowHidden(e) {
				this.showHidden = e.detail.value
				storage.setShowHidden(this.showHidden)
			},
			changeAddFrame(e) {
				this.addFrame = e.detail.value
				storage.setAddFrame(this.addFrame)
			},
			changeShowChildDevice(e) {
				this.showChildDevice = e.detail.value
				storage.setShowChildDevice(this.showChildDevice)
			},
			changeShowView(e) {
				this.showView = e.detail.value
				storage.setShowView(this.showView)
			},
		},
		onShareAppMessage(res) {
			let nickName = storage.getNickName()
			let shortCompanyName = storage.getShortCompanyName()
			return {
				title: `${nickName}${this.$t('share')}${shortCompanyName}`,
				path: `/pages/moreSetting/moreSetting`,
				success: (res) => {
					// console.log(res)
				}
			}
		}
	}
</script>

<style scoped>
	page {
		background-color: #FFFFFF;
	}

	.selectButton {
		color: #fff;
		background-color: var(--color)
	}

	.noSelectButton {
		color: #8799a3;
		background-color: #efefef
	}
</style>
